


let active = document.querySelector('#active')
let registBox = document.querySelector('.registbox')
let logoBox = document.querySelector('.logobox')
let regist = document.querySelector('.regist')
let headA = document.querySelectorAll('.headtext a')
let user = document.querySelector('.user')
let userClear = document.querySelector('.userclear')
let pwd = document.querySelector('.pwd')
let pwdClear = document.querySelector('.pwdclear')
let userAlert = document.querySelector('.useralert')
let pwdAlert = document.querySelector('.pwdalert')

// 模拟服务器上的传递过来的数据
let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
]


/* 
  需求: 遍历apiTypeData数组,取出name属性中的值,拼接到一个新的a标签中
*/

//获取元素
let apiBox1 = document.querySelector('.nav-box1')
let navText = document.querySelector('.navtext')

//定义数组保存组装好的数据
let apiHtml = ''

//组装数组
apiTypeData.forEach(function (v) {

    if (v.isnew) {
        apiHtml += `
        <a href = "#" class = "nav-text fwd" data-keyword='${v.keyword}'">${v.name}</a>
      `
    } else {
        apiHtml += `
        <a href = "#" class = "nav-text" data-keyword='${v.keyword}'>${v.name}</a>
      `
    }
})

apiBox1.innerHTML = apiHtml

/* 点击apihtml数据渲染到searchText  用事件委派*/
let searchText = document.querySelector('.searchText')

apiBox1.addEventListener('click', function (e) {
    if (e.target.nodeName === 'A') {
        searchText.textContent = e.target.textContent
        navText.placeholder = e.target.dataset.keyword
        /*  console.log(e.target.dataset.keyword) */
    }
})




//API列表区域 模拟服务器返回的数据
let listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
]

//遍历listDataArr,组装成HTML代码,并渲染到min-box
let contentBox = document.querySelector('.content-box')

function renderContentlist() {
    //定义变量保存html代码
    let contentBoxHtml = ''
    listDataArr.forEach(function (v) {
        contentBoxHtml += `
<div class="min-box">
    <p class="company ${v.isSpecial ? 'show' : ''}">企业专用</p>
    <div class="titlebox">
        <a href="./API-details.html"><img src="../imgs/${v.img}" alt=""></a>
        <p class="title">${v.name}</p>
        <span class="${v.price === '免费' ? 'green' : 'red'}">${v.price}</span>
    </div>
    <a href="javascript:" id="btn" class="btn">申请数据</a>
</div>
    `
    })
    //将数据渲染到content-box中
    contentBox.innerHTML = contentBoxHtml
}
renderContentlist()


let mask = document.querySelector('.mask')
/* 点击btn申请数据,显示mask模态框 */
contentBox.addEventListener('click', function (e) {
    //筛选事件源
    if (e.target.nodeName === 'A')
        mask.style.display = 'block'
})

/* 
  需求: 点击mask,隐藏自己
*/
mask.addEventListener('click', function () {
    mask.style.display = 'none'
    user.value = pwd.value = userClear.style.display = pwdClear.style.display = userAlert.style.display = pwdAlert.style.display = ''
})

/* 
  需求: 当事件源在model内时,阻止事件冒泡
*/
let model = document.querySelector('.model')
model.addEventListener('click', function (e) {
    e.stopPropagation()
})




//定义变量保存点击的上一个的索引
let index = 0
headA.forEach(function (dom, i) {
    dom.addEventListener('click', function () {
        headA[index].classList.remove('active')
        this.classList.add('active')

        if (i === 0) {
            logoBox.style.display = 'block'
            registBox.style.display = 'none'
        } else {
            logoBox.style.display = 'none'
            registBox.style.display = 'block'
        }
        index = i
    })
})






/*
let useReg = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/; //正则表达式
*/

/* 
  需求: 当user框失去焦点时,验证user框内的信息是否正确
*/
let userReg = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/;
let pwdReg= /^\d{6}/;
user.addEventListener('blur',function(){
    let bool = userReg.test(user.value)
    if(bool){
        userAlert.style.display = 'none'
    }else{
        userAlert.style.display = 'block'
        userAlert.textContent = '您输入的不正确'
    }
})


/* pwd输入框失去焦点时,进行验证并提示 */
pwd.addEventListener('blur',function(){
    let bool = pwdReg.test(pwd.value)
    if(bool){
        pwdAlert.style.display = 'none'
    }else{
        pwdAlert.style.display = 'block'
        pwdAlert.textContent = '您输入的不正确'
    }
})
/* 
  需求: 输入用户名时,显示userclear
*/
user.addEventListener('input', function () {
    userClear.style.display = 'block'
    if (user.value === '') {
        userClear.style.display = 'none'
        userAlert.style.display = 'none'
    }else{
        userClear.style.display = 'block'
    }
})
/* 
  需求: 输入密码框时,显示pwdclear
*/
pwd.addEventListener('input', function () {
    pwdClear.style.display = 'block'
    if (pwd.value === '') {
        pwdClear.style.display = 'none'
        pwdAlert.style.display = 'none'
    }
})


pwdClear.addEventListener('click', function () {
    pwd.value = ''
    pwdClear.style.display = 'none'
    pwdAlert.style.display = 'none'
})

/* 
  点击userClear和pwdClear时,清除自身所在行的信息
*/
userClear.addEventListener('click', function () {
    user.value = ''
    userClear.style.display = 'none'
    userAlert.style.display = 'none'
})


